<template>
	<view>
		<view class="container">
			<view class="head rel">
				<swiper autoplay="auto" :circular="true" duration="500" :indicatorActiveColor="color" indicatorColor="white"
					:indicatorDots="true" interval="5000">
					<swiper-item v-for="(item, index) in QgGoodInfo.img" :key="index">
						<image class="slide-image" mode="aspectFill" :src="daya_app_url + item"></image>
					</swiper-item>
				</swiper>
				<view class="ab rush_info">
					<view class="dis_in limit color_f">
						<text>限时特惠</text>
						<!-- <text v-if="QgGoodInfo.surplus > 0">抢购中</text> -->
						<!-- <text v-else>抢光了</text> -->
					</view>
					<!-- :style="'background:' + color" -->
					<view class="dis_in color_f">
						<view class="fon_26 jljs">
							距离结束
							<text class="timefk">{{ clock.day }}</text>
							天
							<text class="timefk">{{ clock.hr }}</text>
							:
							<text class="timefk">{{ clock.min }}</text>
							:
							<text class="timefk">{{ clock.sec }}</text>
						</view>
						<!-- <view class="end rel fon_24">
              <view class="ab end3" v-if="QgGoodInfo.surplus > 0"
                >仅剩{{ QgGoodInfo.surplus }}份,总{{
                  QgGoodInfo.number
                }}份</view
              >
              <view
                class="ab end1"
                :style="'width:' + QgGoodInfo.yqnum + '%;background:' + color"
                v-if="QgGoodInfo.surplus > 0 && QgGoodInfo.yqnum != '0.0'"
              ></view>
              <view
                class="ab end1"
                :style="'width:100%;background:' + color"
                v-if="QgGoodInfo.surplus == 0"
                >抢光了</view
              >
              <view class="ab end2" v-if="QgGoodInfo.surplus > 0"></view>
            </view> -->
					</view>
				</view>
			</view>
			<view class="pa_1 ba_f Collage">
				<view class="price ba_f pa_0">
					<view>
						<text class="fon_24" style="color: #3A3838;font-size: 24rpx;">￥</text>
						<text class="fon_36 mar_r" style="color: #3A3838; font-size: 44rpx">{{ QgGoodInfo.money }}</text>
						<text class="fon_24 text_d color_9" style="color: #9A9494; font-size: 24rpx">￥{{ QgGoodInfo.price }}</text>
					</view>
					<view class="t_r">
						<image class="dis_in mar_r" mode="aspectFill" src="/static/ymq_canyino2o/like.png"></image>
						<text class="fon_24 dis_in">{{ QgGoodInfo.hot }}人喜欢</text>
					</view>
				</view>
				<view class="spjj">
					<text>限购</text>
					<text>{{ QgGoodInfo.content }}</text>
				</view>
				<view>
					<view class="ba_f pa_0 time">
						<text class="color_6 fon_30 name">抢购时间</text>
						<view class="t_r color_9 fon_26 time-range"><text>活动起止时间：</text> {{ QgGoodInfo.start_time }}至{{ QgGoodInfo.end_time }}</view>
					</view>

				</view>
			</view>
			 <!-- v-if="QgPeople.length > 0" -->
			<!-- <view class="ba_f mar_t pa_1 Collage" v-if="QgGoodInfo.content != ''">
				<view class="pa_0 bor_bottom fon_30 color_6">商品简介</view>
				<view class="spjj">
					{{ QgGoodInfo.content }}
				</view>
			</view> -->
			<view @tap="bought" class="Purchased pa_0">
				<view class="dis_in">
					<image :class="'logo ' + (index != 0 ? 'mar_l' : '')" mode="aspectFill" :src="item.user_img"
						v-if="index < 6" v-for="(item, index) in QgPeople" :key="index"></image>
				</view>
				<view class="dis_in fon_28 color_6 t_r" style="margin-left: auto;">
					<text class="mar_r dis_in">已有{{ QgPeople.length }}人购买</text>
					<!-- <image class="se_right dis_in" mode="aspectFit"
						src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"></image> -->
				</view>
			</view>
			<!-- <view class="ba_f mar_t pa_1 shop">
				<view class="address rel pa_0 bor_bottom">
					<image class="dis_in" mode="aspectFill" :src="StoreInfo.store.logo"
						style="width: 70rpx; height: 70rpx; border-radius: 50%"></image>
					<view class="dis_in fon_28">
						<view class="color_6">
							{{ StoreInfo.store.name }}
						</view>
						<view class="color_9">
							营业时间：{{ StoreInfo.store.time }}-{{ StoreInfo.store.time2 }}
							<text style="margin-left: 20rpx">{{ StoreInfo.store.time3 }}-{{ StoreInfo.store.time4 }}</text>
						</view>
					</view>
					<image @tap="maketel" class="dis_in ab ud se_right" mode="aspectFit"
						src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png"></image>
				</view>
				<view @tap="location" class="address rel pa_0">
					<image class="dis_in" mode="aspectFit"
						src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"
						style="width: 40rpx; height: 40rpx; margin: 0rpx 15rpx"></image>
					<view class="dis_in fon_28">
						<view class="color_6">
							{{ StoreInfo.store.address }}
						</view>
					</view>
					<image class="dis_in ab ud se_right" mode="aspectFit"
						src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"></image>
				</view>
			</view> -->
			<view class="ba_f mar_t pa_1 shop-wrapper">
				<view class="address rel pa_0">
					<view class="dis_in fon_28 left">
						<view class="color_6 name">
							{{ StoreInfo.store.name }}
						</view>
						<view class="color_9" style="margin-top: 30rpx;">
							营业时间：{{ StoreInfo.store.time }}-{{ StoreInfo.store.time2 }}
							<text style="margin-left: 20rpx">{{ StoreInfo.store.time3 }}-{{ StoreInfo.store.time4 }}</text>
						</view>
						<view class="color_9">
							<text>{{ StoreInfo.store.address }}</text>
						</view>
					</view>
					<view class="right">
						<view class="item" @tap="maketel">
							<image src="/static/ymq_canyino2o/bd.png" mode=""></image>
							<text>拨打</text>
						</view>
						<view class="item dh" @tap="location">
							<image src="/static/ymq_canyino2o/dh.png" mode=""></image>
							<text>导航</text>
						</view>
					</view>
					<!-- <image @tap="maketel" class="dis_in ab ud se_right" mode="aspectFit"
						src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png"></image> -->
				</view>
				<!-- <view @tap="location" class="address rel pa_0">
					<image class="dis_in" mode="aspectFit"
						src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"
						style="width: 40rpx; height: 40rpx; margin: 0rpx 15rpx"></image>
					<view class="dis_in fon_28">
						<view class="color_6">
							{{ StoreInfo.store.address }}
						</view>
					</view>
					<image class="dis_in ab ud se_right" mode="aspectFit"
						src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"></image>
				</view> -->
			</view>
			<view class="ba_f mar_t pa_1 buy">
				<view class="pa_0 fon_30 color_6 name">抢购流程</view>
				<view class="sylc">
					<view class="lccel">
						<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/hezuo.png"></image>
						<view>参与抢购</view>
					</view>
					<view class="hx"></view>
					<view class="lccel">
						<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/shenp.png"></image>
						<view>付款成功</view>
					</view>
					<view class="hx"></view>
					<view class="lccel">
						<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/shenq.png"></image>
						<view>到店验证</view>
					</view>
				</view>
			</view>
			<view class="ba_f mar_t pa_1 buy">
				<view class="pa_0 fon_30 color_6 name">购买须知</view>
				<view class="sm">
					<!-- <view class="yuan"></view> -->
					 <!-- :style="'color:' + color" -->
					<text>1.商品限购：</text>
					<text>每人限购{{ QgGoodInfo.qg_num }}份</text>
				</view>
				<view class="sm">
					<!-- <view class="yuan"></view> -->
					<text >2.每单限购：</text>
					<text>每单限购1份</text>
				</view>
				<view class="sm">
					<!-- <view class="yuan"></view> -->
					<text>3.消费截止时间：</text>
					<text>购买后{{ QgGoodInfo.consumption_time }}天</text>
				</view>
			</view>
			<view class="shop_detail pa_1 ba_f mar_t detail">
				<view class="pa_0  fon_30 color_6 name">商品详情</view>
				<view class="pa_0">
					<rich-text :nodes="QgGoodInfo.details"></rich-text>
				</view>
			</view>
			<view style="height: 120rpx"></view>
			<view class="fixd">
				<view @tap="tzsj" class="fon_24 color_6 rel">
					<form @reset="formReset" @submit="addformSubmit" class="plate_form" :reportSubmit="true">
						<button formType="submit"></button>
					</form>
					<image mode="aspectFit" src="/static/ymq_canyino2o/dp.png"></image>
					<view>店铺</view>
				</view>
				<view @tap="maketel" class="fon_24 color_6 rel">
					<form @reset="formReset" @submit="addformSubmit" class="plate_form" :reportSubmit="true">
						<button formType="submit"></button>
					</form>
					<image mode="aspectFit" src="/static/ymq_canyino2o/fx-1.png"></image>
					<view>分享</view>
				</view>
				<view @tap="order" class="fon_24 color_6 rel">
					<form @reset="formReset" @submit="addformSubmit" class="plate_form" :reportSubmit="true">
						<button formType="submit"></button>
					</form>
					<image mode="aspectFit" src="/static/ymq_canyino2o/dd.png"></image>
					<view>订单</view>
				</view>
				<view @tap="ljqg" class="fon_30 color_f rel btn-wrapper"
					v-if="QgGoodInfo.surplus > 0 && IsPay != 1">
					<form @reset="formReset" @submit="addformSubmit" class="plate_form" :reportSubmit="true">
						<button formType="submit"></button>
					</form>
					立即抢购
				</view>
				<view class="fon_30 color_f rel btn-wrapper"
					v-if="QgGoodInfo.surplus <= 0 && IsPay != 1">
					<form @reset="formReset" @submit="addformSubmit" class="plate_form" :reportSubmit="true">
						<button formType="submit"></button>
					</form>
					已抢光了
				</view>
				<view class="fon_30 color_f rel btn-wrapper" v-if="IsPay == 1">
					<form @reset="formReset" @submit="addformSubmit" class="plate_form" :reportSubmit="true">
						<button formType="submit"></button>
					</form>
					您抢过了
				</view>
			</view>
		</view>
		<view class="kjdhzz" v-if="opendh"></view>
		<view class="kjdhv">
			<view @tap="opennav" class="kjdh">快捷导航</view>
			<image @tap="opennav" class="kjdhx" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/dhclose.png"
				:style="'background:' + color" v-if="opendh"></image>
			<view :class="'kjlb ' + (opendh ? 'kjlb-show' : 'kjlb-hide')">
				<navigator class="kjlbv" openType="reLaunch" url="/ymq_canyino2o/pages/index/index" v-if="xtxx.model == '1'">
					<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/gssjjs.png"></image>
					<view>首页</view>
				</navigator>
				<navigator class="kjlbv" openType="reLaunch" url="/ymq_canyino2o/pages/wddd/order">
					<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/gssj.png"></image>
					<view>订单</view>
				</navigator>
				<navigator class="kjlbv" openType="reLaunch" url="/ymq_canyino2o/pages/my2/index">
					<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/gstel.png"></image>
					<view>我的</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import cardlist from '@/ymq_canyino2o/dist/cardlist/index'
	import gettel from '@/ymq_canyino2o/dist/gettel/index'
	var app = getApp()
	var util = require('../../utils/util.js')
	export default {
		components: {
			cardlist,
			gettel
		},
		data() {
			return {
				userinfo: '',
				IsPay: '',
				daya_app_url: '',

				xtxx: {
					model: ''
				},

				QgPeople: '',

				clock: {
					day: '',
					hr: '',
					min: '',
					sec: ''
				},

				QgGoodInfo: {
					img: [],
					money: '',
					name: '',
					surplus: 0,
					number: '',
					yqnum: '',
					price: '',
					hot: '',
					start_time: '',
					end_time: '',
					content: '',
					qg_num: '',
					consumption_time: '',
					details: ''
				},

				StoreInfo: {
					store: {
						logo: '',
						name: '',
						time3: '',
						time4: '',
						address: ''
					}
				},

				opendh: '',
				color: ''
			}
		},
		onLoad: function(a) {
      this.daya_app_url=app.globalData.xtxx.attachurl
			app.globalData.setNavigationBarColor(this)
			var that = this
			app.globalData.getUserInfo(function(t) {
				console.log(t)
				that.setData({
					userinfo: t
				})
				app.globalData.util.request({
					url: 'entry/wxapp/IsPay',
					cachetime: '0',
					data: {
						user_id: t.id,
						good_id: a.id
					},
					success: function(t) {
						console.log(t)
						that.setData({
							IsPay: t.data
						})
					}
				})
			})
			app.globalData.util.request({
				url: 'entry/wxapp/Url',
				cachetime: '0',
				success: function(t) {
					console.log(t.data)
					that.setData({
						url: t.data,
						xtxx: getApp().globalData.xtxx
					})
				}
			})
			app.globalData.util.request({
				url: 'entry/wxapp/QgPeople',
				cachetime: '0',
				data: {
					good_id: a.id
				},
				success: function(t) {
					console.log(t.data)
					that.setData({
						QgPeople: t.data
					})
				}
			})
			app.globalData.util.request({
				url: 'entry/wxapp/QgGoodInfo',
				cachetime: '0',
				data: {
					id: a.id
				},
				success: function(t) {
					console.log(t)
					uni.setNavigationBarTitle({
						title: t.data.money + '元抢购' + t.data.name
					})
					t.data.yqnum = (
						((Number(t.data.number) - Number(t.data.surplus)) /
							Number(t.data.number)) *
						100
					).toFixed(1)
					t.data.img = t.data.img.split(',')
					new Date(t.data.end_time).getTime()
					!(function t(a) {
						var o = a || []
						var e = Math.round(new Date().getTime() / 1000)
						var n = o - e || []
						that.setData({
							clock: (function(t) {
								var a = Math.floor(t)
								var o = Math.floor(a / 3600 / 24)
								var e = Math.floor((a / 3600) % 24)
								var n = Math.floor((a / 60) % 60)
								var i = Math.floor(a % 60)
								if (o < 10) {
									o = '0' + o
								}
								if (e < 10) {
									e = '0' + e
								}
								if (i < 10) {
									i = '0' + i
								}
								if (n < 10) {
									n = '0' + n
								}
								return {
									day: o,
									hr: e,
									min: n,
									sec: i
								}
							})(n)
						})
						if (n <= 0) {
							that.setData({
								clock: false
							})
						} else {
							if (0 < n) {
								setTimeout(function() {
									n -= 1000
									t(a)
								}, 1000)
							}
						}
					})(t.data.end_time)
					t.data.start_time = util.ormatDate(t.data.start_time)
					t.data.end_time = util.ormatDate(t.data.end_time)
					that.setData({
						QgGoodInfo: t.data
					})
					app.globalData.util.request({
						url: 'entry/wxapp/StoreInfo',
						cachetime: '0',
						data: {
							store_id: t.data.store_id
						},
						success: function(t) {
							console.log('商家详情', t)
							that.setData({
								StoreInfo: t.data
							})
						}
					})
				}
			})
		},
		onReady: function() {},
		onShow: function() {},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {},
		onReachBottom: function() {},
		onShareAppMessage: function() {
			var t = this.userinfo
			var a = this.QgGoodInfo
			var o = t.name + '邀请你' + a.money + '元抢购' + a.name
			console.log(t)
			return {
				title: o,
				path: '/ymq_canyino2o/pages/xsqg/xsqgxq?id=' + a.id,
				success: function(t) {},
				fail: function(t) {}
			}
		},
		onShareTimeline: function() {
			var t = this.userinfo
			var a = this.QgGoodInfo
			var o = t.name + '邀请你' + a.money + '元抢购' + a.name
			console.log(t)
			return {
				title: o,
				path: '/ymq_canyino2o/pages/xsqg/xsqgxq?id=' + a.id,
				success: function(t) {},
				fail: function(t) {}
			}
		},
		methods: {
			opennav: function() {
				this.setData({
					opendh: !this.opendh
				})
			},

			bought: function() {
				uni.navigateTo({
					url: 'yqgyh?goodid=' + this.QgGoodInfo.id
				})
			},

			tzsj: function() {
				uni.redirectTo({
					url: '../seller/index?sjid=' + this.StoreInfo.store.id
				})
			},

			order: function() {
				uni.navigateTo({
					url: 'order'
				})
			},

			addformSubmit: function(t) {
				this.checkLogin()
				console.log('formid', t.detail.formId)
				var a = uni.getStorageSync('users').id

				app.globalData.util.request({
					url: 'entry/wxapp/AddFormId',
					cachetime: '0',
					data: {
						user_id: a,
						form_id: t.detail.formId
					},
					success: function(t) {
						console.log(t.data)
					}
				});
			},

			ljqg: function() {
				var that = this
				var e = this.userinfo
				var n = this.QgGoodInfo.store_id
				var i = this.QgGoodInfo.id
				console.log(e)
				if ('' == e.img || '' == e.name) {
					uni.navigateTo({
						url: '/ymq_canyino2o/pages/my/userinfo' // ../smdc/getdl
					})
				} else {
					if ('1' == this.QgGoodInfo.type) {
						uni.redirectTo({
							url: 'qgform?storeid=' + n + '&goodid=' + i
						})
					}
					if ('2' == this.QgGoodInfo.type) {
						uni.showLoading({
							title: '正在加载',
							mask: true
						})
						app.globalData.util.request({
							url: 'entry/wxapp/DelCar',
							cachetime: '0',
							data: {
								user_id: e.id,
								store_id: n
							},
							success: function(t) {
								console.log(t.data)
								var a = that.QgGoodInfo
								console.log(a)
								uni.showLoading({
									title: '正在加载',
									mask: true
								})
								app.globalData.util.request({
									url: 'entry/wxapp/QgAddCar',
									cachetime: '0',
									data: {
										money: a.money,
										good_id: i,
										store_id: n,
										user_id: e.id,
										num: 1,
										spec: '',
										combination_id: '',
										box_money: 0,
										is_qg: 1,
										qg_name: a.name,
										qg_logo: a.logo
									},
									success: function(t) {
										console.log(t)
										if ('1' == t.data) {
											uni.redirectTo({
												url: '/ymq_canyino2o/pages/takeout/takeoutindex?storeid=' +
													n +
													'&qgjl=1'
											})
										} else {
											if ('超出库存!' == t.data) {
												uni.showModal({
													title: '提示',
													content: '库存不足'
												})
											} else {
												if ('超出购买限制!' == t.data) {
													uni.showModal({
														title: '提示',
														content: '超出购买限制!'
													})
												}
											}
										}
									}
								})
							}
						})
					}
				}
			},

			maketel: function(t) {
				var a = this.StoreInfo.store.tel
				uni.makePhoneCall({
					phoneNumber: a
				})
			},

			location: function() {
				var t = this.StoreInfo.store.coordinates.split(',')
				var a = this.StoreInfo.store
				console.log(t)
				uni.openLocation({
					latitude: parseFloat(t[0]),
					longitude: parseFloat(t[1]),
					address: a.address,
					name: a.name
				})
			},

			formReset() {
				console.log('占位：函数 formReset 未声明')
			}
		}
	}
</script>
<style scoped>
	@import './xsqgxq.css';
</style>
